<template>
    <el-table :data="goodsList" style="width: 100%">
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="图片" width="180">
            <template #default="scope">
               <router-link :to="'/Admin/GoodsDetail/'+scope.row.proid"> <img class="img" :src="scope.row.img1" ></router-link>
            </template>
        </el-table-column>
        <el-table-column label="名称" width="180">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                  <!-- <router-link :to="'/Admin/GoodsDetail?proid='+scope.row.proid+'&username=111'">  {{ scope.row.proname }}</router-link> -->
                  <router-link :to="{path:'/Admin/GoodsDetail',query:{proid:scope.row.proid,username:'111'}}">  {{ scope.row.proname }}</router-link>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="品牌" width="180">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    {{ scope.row.brand }}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="分类" width="180">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    {{ scope.row.category }}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="原价">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    {{ scope.row.originprice }}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="折扣">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    {{ scope.row.discount }}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="销量">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    {{ scope.row.sales }}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default>
                <el-button size="small">修改</el-button>
                <el-button size="small" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination small background layout="prev, pager, next,jumper,sizes" v-model:page-size="limitNum" :total="total" class="mt-4" @current-change="changePageIndex" @size-change="changeLimitNum" />
</template>

<script setup lang="ts">

import { reactive, ref } from "vue";
import type {Ref} from 'vue'
import type { IGoods } from "@/myTypes/index";
import {getGoodsListApi} from "~/goods";

// 定义商品列表数据
const goodsList: IGoods[] = reactive([]);
// 页码
const count = ref(1);
// 每页多少条数据：
const limitNum = ref(20);
// 总条数
const total:Ref<number> = ref(0);

// 获取商品列表
const getGoodsList = () => {
    getGoodsListApi({
        count:count.value,
        limitNum:limitNum.value
    })
        .then((res: any) => {
            if (res.data.code === "200") {
                total.value = res.data.total;
                goodsList.length = 0;
                goodsList.push(...res.data.data);
                console.log("goodsList", goodsList);
            }
        })
}

getGoodsList();

// 改变页码
const changePageIndex=(pageIndex:number)=>{
    count.value = pageIndex;
    getGoodsList();
}

// 改变每页的条数
const changeLimitNum=(val:number)=>{
    limitNum.value = val;
    getGoodsList();
}

</script>

<style scoped>
.img {
    width: 100px;
    height: 80px;
}
</style>